<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElCalendar, ElButton, ElAvatar } from 'element-plus'
import { Search, MessageSquare, Home, Send, Settings } from 'lucide-vue-next'
// 菜单项
const footerItems = [
  { icon: Home, label: '首页', path: '/reading' },
  { icon: Send, label: '联系' },
  { icon: MessageSquare, label: '订阅' },
  { icon: Settings, label: '管理', path: '/login' }
]

const currentDate = ref(new Date())
// 日历
const formattedDate = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth() + 1
  const day = currentDate.value.getDate()
  return `${year}年${month}月${day}日`
})

// 访问主页
const handleClick = () => {
  console.log("按钮被点击");
  window.open('https://space.bilibili.com/4669493', '_blank');
}

// 控制菜单显示
const menu = ref(false)

import { userInfoPublicService } from '@/apis/user';

const creatorInfo = ref({
  username: '',
  nickname: '',
  userPic: ''
})

const creatorList = async () => {
  let result = await userInfoPublicService("大流士三岁")
  // console.log(result);
  creatorInfo.value.username = result.data.username;
  creatorInfo.value.nickname = result.data.nickname;
  creatorInfo.value.userPic = result.data.userPic;
  // console.log(creatorInfo);
  // console.log(creatorInfo.value.nickname);
}
onMounted(() => { creatorList() })





</script>
<template>
          <!-- <el-button
          v-show="showMenuButton"
          type="primary"
          class="menu-button"
          @click="menu = true"
        >
          <Menu size="20" />
        </el-button>  -->
      <!-- <ArticleList class="article-list" /> -->
  <el-drawer 
      v-model="menu" 
      title="I am the title" 
      direction="ltr" 
      paddings-top=0
      size="300px"
      :with-header="false" 
      class="menu-drawer">
    <div class="drawer-content">
      <div class="header">
        <span>人只有醒来后才知道自己睡了一觉</span>
        <el-button type="text" class="close-btn" @click="drawer = false">×</el-button>
      </div>
      <!-- User Profile -->
      <div class="user-profile">
        c
      </div>
      <!-- Search Box -->
      <div class="search-box">
        <Search class="search-icon" size="16" />
        <input type="text" placeholder="搜索..." />
      </div>
      <!-- Calendar -->
      <div class="calendar-wrapper">
        <div class="calendar-header">
          <button @click="currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)">‹</button>
          <span>{{ formattedDate }}</span>
          <button @click="currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)">›</button>
        </div>
        <el-calendar v-model="currentDate">
          <template #header>
            <span></span>
          </template>
          <template #date-cell="{ data }">
            <p :class="{ 'is-selected': data.isSelected, 'is-today': data.isToday }">
              {{ data.day.split('-').pop().replace(/^0/, '') }}
            </p>
          </template>
        </el-calendar>
      </div>
      <!-- Navigation Menu -->
      <nav class="nav-menu">
        <!-- <a v-for="item in menuItems" :key="item.label" :href="item.path" class="menu-item">
          <component :is="item.icon" size="16" />
          <span>{{ item.label }}</span>
          <div class="arrow">›</div>
        </a> -->
      </nav>

      <!-- Footer Navigation -->
      <div class="footer-nav">
        <a v-for="item in footerItems" :key="item.label" :href="item.path" class="footer-item">
          <component :is="item.icon" size="16" />
          <span>{{ item.label }}</span>
        </a>
      </div>
    </div>
  </el-drawer>
</template>
<style scoped>
/* ::deep .el-drawer {
  color: white;
  padding: 0;
  background-color: #2f2e31 !important;

  .el-drawer__body {
    padding: 0px;
    padding-top: 10px;
  }
} */

.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: #fafafa;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(69, 69, 69);

  .close-btn {
    color: #6a6a6a;
    font-size: 35px;
    position: fixed;
    left: 270px;
  }

}

.user-profile {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .profile-info {
    display: flex;
    gap: 15px;
  }
}


.user-details {
  flex: 1;

  .nickname {
    color: #fff;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .stats {
    font-size: 0.9rem;
    color: #888;
  }

  .stats>* {
    display: block;
    margin-bottom: 5px;
  }

  .follow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;

  }

  .follow-btn {
    padding: 0;
    font-size: 15px;
    background-color: transparent;
    border: none;
    color: #bdbdbd;

    &:hover {
      color: #ffffff;
    }
  }
}

.search-box {
  position: relative;
  padding: 15px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box input {
  width: 100%;
  padding: 8px 30px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: #fff;
}

.search-icon {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}


.calendar-wrapper {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.calendar-wrapper :deep(.el-calendar) {
  background-color: transparent;
  --el-calendar-border-color: rgba(255, 255, 255, 0.1);
}

.calendar-wrapper :deep(.el-calendar__header) {
  display: none;
}

.calendar-wrapper :deep(.el-calendar__body) {
  padding: 0;
}

.calendar-wrapper :deep(.el-calendar-day) {
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-wrapper :deep(.el-calendar-day p) {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-radius: 50%;
}

.calendar-wrapper :deep(.el-calendar-day p.is-selected),
.calendar-wrapper :deep(.el-calendar-day p.is-today) {
  background-color: #409EFF;
}

.nav-menu {
  padding: 15px 0;
  flex: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-item span {
  margin-left: 12px;
  flex: 1;
}

.arrow {
  color: #888;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #888;
  text-decoration: none;
  font-size: 0.8rem;
}

.footer-item:hover {
  color: #fff;
}
</style>